<style media="screen">
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
	width: 6px;
	height: 16px;
	background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
	background-color: #555;
}

.header {
	width: 100%;
	margin: 10px 0;
	text-align: right;
}

.todo {
	margin: 20px 0;
	padding: 20px 45px;
	width: 100%;
	height: 80%;
	background-color: rgb(242, 149, 67);
	/* position: absolute; */
	color: #fff;
	border-radius: 10px;
	overflow: auto;
}

.todo>.head {
	max-width: 50%;
	min-width: 200px;
	text-align: center;
	color: #fff;
	background-color: rgba(0, 0, 0, .2);
	border-radius: 20px;
	margin: 0 auto;
	font-size: 22px;
}

.todo>.item {
	min-height: 50px;
	padding: 5px 20px;
	margin: 10px 0px;
	background-color: #fff;
	border-radius: 5px;
	color: #323232;
	position: relative;
	box-shadow: 0 3px 11px 2px rgba(0, 0, 0, .1);
}

.todo>.item>.title {
	height: 40px;
	line-height: 40px;
	color: #323232;
	font-size: 16px;
	border-bottom: 1px solid #f2f2f2;
}

.todo>.item>.action {
	position: absolute;
	right: 30px;
	top: 17px;
	color: #9b9b9b;
	font-size: 14px;
}

.todo>.item>.desc {
	color: #9b9b9b;
	font-size: 14px;
	padding: 7px 0;
}

.todo>.item>.done {
	text-decoration: line-through;
	color: gray;
	font-weight: 100;
}

.line {
	width: 100%;
	height: 1px;
	background-color: #f2f2f2
}
</style>
<template>
<div style="width:100%;height:100%;">
	<Row style="height: 100%">
		<Col span='16' offset='4' style="height: 100%">
		<div class="header">
			<Button type="primary" @click="showAddTodo()" icon="plus-round">添加任务</Button>
		</div>
		<div class="line"></div>
		<div id="div-todo" class="todo">
			<h2 class="head">{{this.currentDate}}</h2>
			<div v-for="(item, index) in todoList" class="item">
				<h3 class="title" :class="{ done: item.status == 1 }">{{ item.title }}</h3>
				<p class="action">
					<Button v-if="item.status===0" type="primary" size="small" icon="android-done" @click="doneTodo(index)">完成</Button>
					<Button type="error" size="small" icon="android-delete" @click="delTodo(index)">删除</Button>
				</p>
				<p class="desc" :class="{ done: item.status == 1 }">{{ item.desc }}</p>
			</div>
		</div>
		</Col>
	</Row>
	<Modal v-model="addModel" @on-ok="addTodo()">
		<p slot="header" style="color:#404655;text-align:center">
			<Icon type="plus-round"></Icon>
			<span>添加新任务</span>
		</p>
		<Form ref="todo" :model="todo" :rules="todoAddRule" label-position="top">
			<FormItem prop="title">
				<Input type="text" v-model="todo.title" placeholder="请输入任务标题..."></Input>
			</FormItem>
			<FormItem prop="desc">
				<Input v-model="todo.desc" type="textarea" :rows="4" placeholder="请输入任务详情（选填）..."></Input>
			</FormItem>
		</Form>
		<div slot="footer">
			<Button type="success" size="large" long :loading="modal_loading" @click="addTodo('todo')">添加</Button>
		</div>
	</Modal>
</div>
</template>
<script>
import Cookies from 'js-cookie'
import date from '@/libs/date.js';

export default {
	data() {
		return {
			modal_loading: false,
			addModel: false,
			todo: {
				title: '',
				desc: ''
			},
			currentDate: date.getDate(),
			todoAddRule: {
				title: [{
					required: true,
					message: '请填写任务标题',
					trigger: 'blur'
				}]
			},
			todoList: []
		}
	},
	methods: {
		showAddTodo() {
			this.addModel = true
			this.todo.title = '';
			this.todo.desc = '';
		},
		addTodo(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					// 数据验证成功 添加数据
					var currentTodo = {
						title: this.todo.title,
						desc: this.todo.desc,
						status: 0
					};
					this.todoList.push(currentTodo);
					this.todoListSort();
					this.updateData();
					this.addModel = false;
				} else {
					this.$Message.error('请录入正确信息!');
				}
			});
		},
		updateData() {
			var dataList = Cookies.get('dataList');
			if (dataList == null || dataList === 'null') {
				dataList = new Map();
			} else {
				dataList = new Map(eval(Cookies.get('dataList')));
			}
			dataList.set(this.currentDate, this.todoList.slice());
			Cookies.set('dataList', dataList);
		},
		delTodo(index) {
			var obj = this;
			this.$Modal.confirm({
				title: '注意',
				content: '<p>你确定要删除此任务吗？</p>',
				onOk: () => {
					// currentTodoList.splice(index, 1);
					obj.todoList.splice(index, 1);
					obj.updateData();
				}
			});
		},
		doneTodo(index) {
			this.todoList[index].status = 1;
			this.todoListSort();
			this.updateData();
		},
		todoListSort() {
			this.todoList = this.todoList.sort(function(item1, item2) {
				if (item1.status < item2.status) {
					return -1;
				}
				if (item1.status > item2.status) {
					return 1;
				}
			});
		}
	},
	mounted() {
		this.$Message.success('欢迎您，来到 ln-todo ，请开始你的高效工作吧');
		// 初始化数据
		var dataList = Cookies.get('dataList') ? new Map(eval(Cookies.get('dataList'))) : new Map();
		var setDemo = false;
		if (dataList.has(this.currentDate) === false) {
			setDemo = true;
			dataList.set(this.currentDate, []);
		}
		this.todoList = dataList.get(this.currentDate);
		if (setDemo === 0) {
			var demoTodo = {
				title: '这个一个任务示范',
				desc: '这是一个任务描述信息',
				status: 0
			}
			this.todoList.push(demoTodo);
		}
	}
}
</script>
